body{
	text-align: center;
}
#box{
	display: block;
	margin: 150px auto;
	color: #ffffff;
	-webkit-border-radius: 10px;
	opacity: 0.6;
	background: red;
	width: 120px;
	height: 75px;
	-webkit-transition: -webkit-transform 2s, opacity 2s, background 2s, width 2s, height 2s;
}
#box:hover{
	-webkit-transform: rotate(360deg);
	opacity: 1;
	background: #1ec7e6;
	width: 450px;
	height: 110px;
}

/*body{
	text-align: center;
}
#box{
	display: block;
	width: 500px;
	margin: 150px auto;
	padding: 15px;
	text-align: center;
	border: 7px solid blue;
	background: yellow;
	-webkit-transition: -webkit-transform 2s;
}
#box:hover{
	-webkit-transform: rotate(45deg);
}*/

/*body{
	text-align: center;
}
#box{
	diaplay: block;
	width: 500px;
	margin: 50px auto;
	padding: 15px;
	text-align: center;
	border: 7px solid blue;
	background: yellow;
	outline: 7px solid red;
	-webkit-transform: scale(1.5);
	-webkit-transform: scale(1, 3);
	-webkit-transform: scale(-1, 1);
	-webkit-transform: rotate(45deg);
	-webkit-transform: skew(30deg);
	-webkit-transform: translate(150px, 300px);
	-webkit-transform: translate(100px, 100px) rotate(30deg) scale(.8);
}
#text{
	font: bold 30px Century Gothic;
}*/

/*body{
	text-align: center;
}
#box{
	display: block;
	width: 500px;
	margin: 50px auto;
	padding: 15px;
	text-align: center;
	border: 1px solid blue;
	background: orange;
	background: -webkit-linea r-gradient(45deg, black, white);
	background: -webkit-radial-gradient(center, circle, red 0%, orange 50%);
	-webkit-border-radius: 25px;
	-webkit-box-shadow: rgba(110, 110, 110, .3) 10px 10px 8px /inset/;
}
#text{
	font: bold 30px Century Gothic;
	text-shadow: rgb(110, 110, 110) 3px 3px 3px;
}*/